<template>
  <div>
    <div id="mainkpgkl">
    </div>
    <p style="font-size:0.4rem;">force07</p>
  </div>

</template>

<script>
  export default{
    props:['datao'],
    data(){
      return{
        tabledata:[],
        tabledataya:[],//x轴参数
        tabledatayc:[],//y轴参数
        tabledatayb:[],//离枕时间
      }
    },
    created() {
      //用于px转换rem，echarts读取不到rem，所以这里要换算
      var d = document.documentElement;
      var cw = d.clientWidth || 750;
      document.documentElement.style.fontSize = (cw/750 * 100) + 'px';
      this.getLoading();
    },
    mounted() {
      this.showCharts()
    },
    methods:{
      getLoading(){
        var that=this;
        that.tabledata=that.datao;
        let ag=that.tabledata;
        that.tabledataya=[];//这是x轴数据,例:“22：00”
        that.tabledatayc=[];//这是y轴显示百分比的地方,例:10%
        that.tabledatayb=[];//这是离枕时间
        for(var i=0;i<ag.length;i++){
          that.tabledataya.push(ag[i].yb)//这是x轴数据
          that.tabledatayc.push(ag[i].ya)//这是y轴显示百分比的地方
          that.tabledatayb.push(ag[i].yc)//这是离枕时间
        }

      },
      //rem转换px
      remToPx(rem) {
        var fontSize = document.documentElement.style.fontSize;
        return Math.floor(rem * fontSize.replace('px', ''));
      },
      showCharts(){

         // 基于准备好的dom，初始化echarts实例,采用svg渲染
         var myChart = this.$echarts.init(document.getElementById('mainkpgkl'),null, {renderer: 'svg'});

         // 绘制图表,注意有值为0要判断改为’-‘
         var data = this.tabledatayc;
         var titlename = this.tabledataya;
         var dataH = this.tabledatayb;




        // Generate data
        var category = [];
        var dottedBase = +new Date();
        var lineData = [];
        var barData1 = [];
        var barData2 = [];
        var barData3 = [];
        var barData4 = [];
        var barData5 = [];
        var barData6 = [];
        var barData7 = [];
        var barData8 = [];
        var barData9 = [];
        var barData10 = [];
        var barData11 = [];
        barData1=['30','40','50','30']
        barData3=['10','10','20','26']
        barData6=['50','50','50','50']
        barData8=['20','10','20','30']
        barData10=['20','10','20','30']
        barData11=['-20','-10','-20','-30']
        barData9=['-20','-10','-20','-30']
        barData7=['-50','-50','-50','-50']
        barData4=['-10','-10','-20','-26']
        barData5=['-30','-40','-50','-30']
        //markPoint-------根据data值决定标注位置
        var markdata=[];//用于标注的值
        for(var i=0;i<barData6.length;i++){
          var markdatals={
            xAxis:"", yAxis:""
          }
          if(barData6[i]!='-'){
            console.log(i)
            markdatals.xAxis=i;
            markdatals.yAxis=parseInt(barData6[i])+this.remToPx(0.2);
            markdata.push(markdatals);
          }
        }
        // -------结束

        app.title = '坐标轴刻度与标签对齐';

        var option = {
          backgroundColor: '#0f2e6f',
          color: ['#3398DB'],
          grid: {
            left: this.remToPx(0.3),
            top: '12%',
            right: this.remToPx(0.3),
            bottom: '15%',
            containLabel:false,
          },
          xAxis : [
            {
              type : 'category',
              // data : ['Mon', 'Tue', 'Wed', 'Thu'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis : [
            {
              type : 'value',
              show:false,
            }
          ],
          series : [
            {
              name: '深睡眠',
              type: 'bar',
              stack: '深睡眠',
              barWidth: '50%',
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#6b00ff'},
                      {offset: 1, color: '#6b00ff'}
                    ]
                  ),
                  // opacity:0.9,
                }
              },
              data: barData10
            },
            {
              name: '浅睡眠',
              type: 'bar',
              stack: '浅睡眠',
              barWidth: '20%',
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#7b55ff'},
                      {offset: 1, color: '#7b55ff'}
                    ]
                  ),
                  // opacity:0.9,
                }
              },
              data: barData8
            },
            {
              name: 'REM',
              type: 'bar',
              stack: '总量',
              barWidth: '15%',
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#a59aff'},
                      {offset: 1, color: '#a59aff'}
                    ]
                  ),
                  // opacity:0.9,
                }
              },
              data: barData1
            },
            {
              name: '清醒',
                type: 'bar',
              stack: 'ad',
              barWidth: '10%',
              itemStyle: {
              normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#4a4d52'},
                    {offset: 1, color: '#4a4d52'}
                  ]
                ),
                // opacity:0.9,
              }
            },
              data: barData3
            },
            {
              name: '离枕时间',
              type: 'bar',
              stack: 'ac',
              barWidth: '5%',
              itemStyle: {
                normal: {
                  borderColor:"#3b7add",
                  color: new this.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#0f2e6f'},
                      {offset: 1, color: '#0f2e6f'}
                    ]
                  )
                }
              },
                markPoint:{
                  symbol:"path://M38.634 2.586 C 19.912 7.118,4.700 23.800,1.717 43.072 C -3.318 75.602,25.398 104.318,57.928 99.283 C 78.844 96.045,96.034 78.915,99.256 58.099 C 104.612 23.498,72.757 -5.673,38.634 2.586 Z,M55.685 35.064 C 59.675 36.571,63.767 40.765,65.054 44.665 L 66.155 48.000 81.078 48.000 L 96.000 48.000 96.000 50.500 L 96.000 53.000 81.013 53.000 L 66.027 53.000 64.649 56.297 C 59.380 68.909,40.620 68.909,35.351 56.297 L 33.973 53.000 18.987 53.000 L 4.000 53.000 4.000 50.500 L 4.000 48.000 18.922 48.000 L 33.845 48.000 34.946 44.665 C 37.646 36.482,47.440 31.948,55.685 35.064 Z",
                  symbolSize:this.remToPx(0.3),
                  data :markdata,
                  itemStyle :{
                    opacity:0.5,
                    color:'#ffffff'
                  }
                },
              data: barData6
            },
            {
              name: '离枕时间倒影',
              type: 'bar',
              stack: 'ac',
              barWidth: '5%',
              itemStyle: {
                normal: {
                  borderColor:"#3b7add",
                  color: new this.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#0f2e6f'},
                      {offset: 1, color: '#0f2e6f'}
                    ]
                  ),
                  opacity:0.8,
                }
              },
              label: {
                normal: {
                  show: true
                }
              },
              data: barData7
            },
            {
              name: '清醒倒影',
              type: 'bar',
              stack: 'ad',
              barWidth: '10%',
              barGap:'0',
              barCategoryGap:'0',
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#4a4d52'},
                      {offset: 1, color: '#4a4d52'}
                    ]
                  ),
                  opacity:0.4,
                }
              },
              data: barData4
            },
            {
              name: 'REM倒影',
              type: 'bar',
              stack: '总量',
              barWidth: '15%',
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#a59aff'},
                      {offset: 1, color: '#a59aff'}
                    ]
                  ),
                  opacity:0.4,
                }
              },
              data: barData5
            },


            {
              name: '浅睡眠倒影',
              type: 'bar',
              stack: '浅睡眠',
              barWidth: '20%',
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#7b55ff'},
                      {offset: 1, color: '#7b55ff'}
                    ]
                  ),
                  opacity:0.4,
                }
              },
              data: barData9
            },
            {
              name: '深睡眠倒影',
              type: 'bar',
              stack: '深睡眠',
              barWidth: '50%',
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#6b00ff'},
                      {offset: 1, color: '#6b00ff'}
                    ]
                  ),
                  opacity:0.4,
                }
              },
              data: barData11
            },
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
      }
    }
  }
</script>

<style>
  #mainkpgkl{
    width:100%;height:4.8rem;float:left;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
  body{
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
   }
</style>
